<template>
	<view class="mobile-item-container gradient-background">
		<Navbar title="拼写测试" bgColor="transparent" :h5Show="false"></Navbar>
		<view class="container" v-if="isShow" :key="index">
			<u--input v-show="classNo" @confirm="verifyChoose()" focus class="custom-input" fontSize="30" inputAlign="center" v-model="inputValue" placeholder="请输入英文" border="bottom" clearable ></u--input>
			<u--text lineHeight="55px" v-show="redText" :class="{ 'swing-text': isSwinging }" :color="choose ? '#7aff37' : '#ff3737'" :text="inputValue" size= "30" align="center" bold></u--text>
			<view v-show="psShow" style="display: flex; align-items: center;padding-top: 20px;">
				<view style="color: #9093b3;padding-right: 10px;font-size: 14px;">{{indexData.partOfSpeech}}</view>
				<u--text blod size="16" :text="indexData.chinese"></u--text>
			</view>
			<u--text v-show="englishShow" :text="indexData.english" size= "30" align="center" bold></u--text>
			<view class="button-container">
				<!--checkmark volume-fill-->
				<u-button class="button" iconColor="#00ff7f" icon="eye" type="success" shape="circle" @click="showEn()"></u-button>
				<u-button class="button" :iconColor="play == true ? '#00ff7f' : '#ffaa00'" icon="volume-fill" type="success" shape="circle" @click="playAudioBt()"></u-button>
				<PlayAudio ref="ad" @onEnded="handleEnded()" @onError="handleEnded()" v-show="false" :path="indexData.voiceFilesPath" size="14px"></PlayAudio>
				<u-button :disabled="inputValue == ''" v-if="!isCl" class="button" iconColor="#000" icon="checkmark" type="success" shape="circle" @click="verifyChoose()"></u-button>
				<u-button class="button" v-if="isCl" color="#ffaa00" :text="`${countdown}s`" type="success" shape="circle"></u-button>
			</view>
		</view>

		<view v-if="!isShow">
			<u-list height="auto" style="margin-top: 10px;" key="ak" >
				<u-list-item v-for="(item, index) in chooseList" :key="index">
					<view style="display: flex; align-items: center;">
						<b @click="toDetail(item.id)" style="padding-right: 10px;" :class="item.choose ? '' : 'font-red'">{{item.english}}</b>
						<u--text type="info" size="12" :text="item.phoneticSymbol"></u--text>
						<PlayAudio :path="item.voiceFilesPath" size="14px"></PlayAudio>
					</view>
					<view style="display: flex; align-items: center;margin-top: 5px;">
						<view style="color: #9093b3;padding-right: 10px;font-size: 10px;">{{item.partOfSpeech}}</view>
						<u--text blod size="14" :text="item.chinese"></u--text>
					</view>
					<!-- 添加虚线 -->
					<u-line style="padding-top: 10px;padding-bottom: 10px;" color="#3f3f3f" dashed></u-line>
				</u-list-item>
				<view class="button-container">
					<u-button class="button-next" type="success" shape="circle" @click="nextGroup()">{{endSize ? '完成' : '下一组'}}</u-button>
				</view>
			</u-list>
		</view>
	</view>
</template>

<script>
	import * as IndexApi from '@/api/index'
	import Navbar from '@/components/navbar/Navbar'
	import PlayAudio from '../../index/playAudio'

	export default {
		components: {
			Navbar,
			PlayAudio,
		},
		data() {
			return {
				id: null,
				isShow: true,
				params: {
					pageNum: 0,
					pageSize: 10
				},
				allList: [],
				newList: [],
				chooseList: [],
				index: -1,
				indexData: {},
				//样式判断
				isCl: false,
				isButton: false,
				randomIndex : 0,
				classNo: true,
				redText: false,
				psShow: true,
				englishShow: false,
				endSize : false,
				isSwinging: false,
				inputValue: "",
				choose: false,
				countdown: 3, // 倒计时秒数
				play: true,
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			showEn(){
				if(this.isCl){
					return;
				}
				var word = this.indexData;
				this.inputValue = word.english;
				this.isCl = true;
				this.redText = true;
				this.classNo = false;
				this.englishShow = false;
				word.choose = false;
				word.optionsList = null;
				this.chooseList.push(word)
				this.startCountdown()
			},
			//测试列表
			loadData() {
				this.params.pageNum += 1;
				IndexApi.learningMaterialsTest(this.params).then(res => {
					console.log("=========", res.rows);
					this.endSize = this.params.pageSize * this.params.pageNum >= res.total;
					this.newList = res.rows;
					//加载选择项
					this.loadChoose()
				})
			},
			//加载选择项
			loadChoose() {
				this.classNo = true;
				this.redText = false;
				this.psShow = true;
				this.englishShow = false;
				this.choose = false;
				this.isCl = false;
				this.inputValue = '';
				this.countdown = 3;
				//判断一组是否完成
				if(this.newList.length == this.chooseList.length){
					this.isShow = false;
					return;
				}
				this.indexData = this.newList[++this.index];
			},
			//验证是否正确
			verifyChoose() {
				if(this.isCl){
					return;
				}
				var word = this.indexData;
				console.log(word.english, '------------',this.inputValue, '------------');
				
				if ( word.english && this.inputValue.trim().toLowerCase() === word.english.trim().toLowerCase()) {
					word.choose = true;
					this.choose = true;
				} else {
					this.isSwinging = true;
					setTimeout(() => {
						this.isSwinging = false;
					}, 300); // 300毫秒后停止抖动
					word.choose = false;
					this.psShow = false;
					this.englishShow = true;
				}
				this.redText = true;
				this.classNo = false;
				word.optionsList = null;
				this.chooseList.push(word)
				this.isCl = true;
				//延迟加载下一题
				// setTimeout(() => {
				// 	this.loadChoose();
				// }, 3000)
				this.startCountdown()
			},
			startCountdown() {
			  const interval = setInterval(() => {
				// 每秒更新倒计时
				this.countdown--;
				if (this.countdown <= 0) {
				  // 如果倒计时结束，清除计时器
				  clearInterval(interval);
				  this.loadChoose();
				}
			  }, 1000);
			},
			nextGroup(){
				this.allList = this.allList.concat(this.chooseList);
				this.chooseList = [];
				this.index = -1;
				this.isShow = true;
				//判断是否把所有的测试单词完成。
				if(this.endSize){
					uni.navigateTo({
						url: '/pages/work/word_test/summarize?data=' + encodeURIComponent(JSON.stringify(this.allList))
					})
					return;
				}
				this.loadData();
			},
			playAudioBt() {
				this.play = false;
				this.$refs.ad.playAudio();
			},
			handleEnded() {
			  this.play = true;
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/index/info?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.custom-input {
		width: 80%;
		font-weight: bold;
	}
	.font-red{
		color: #ff5500;
	}
	.button-container {
		display: flex; 
		align-items: center;
		position: fixed;
		width: 100%;
		bottom: 50px; /* 距离屏幕底部的距离 */
	}
	.button {
		font-size: 16px;
		width: 50px;
		background: #e6e6e6;
		border: none;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}
	.button-next {
		font-size: 16px;
		width: 90%;
		background: linear-gradient(145deg, #80c0be, #4c9480);
		border: none;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	.container {
		margin-top: 30%;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	.swing-text {
	    animation: swingAnimation 100ms ease-in-out infinite alternate;
	}
	
	@keyframes swingAnimation {
		50% {
			transform: translateX(10px) translateY(0); /* 控制元素向右抖动的距离 */
		}
		100% {
			transform: translateX(0) translateY(0);
		}
	}
</style>